{% extends 'base_tabler.html' %}

{% block content %}
<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-10">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">图表页面 1</h3>
        </div>
        <div class="card-body">
          <p>这里是图表页面 1。</p>
          <!-- Add chart 1 content here -->
          <div id="chart1" style="width:100%; height:400px;"></div>
          {# Example: Render chart if passed from view #}
          {# {{ chart1|safe }} #}
          <p><a href="{% url 'user_dashboard' %}" class="btn btn-secondary mt-3">返回用户仪表盘</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
{# Add JavaScript for chart 1 if needed #}
<script>
  // Example: Initialize chart using a library like ECharts or Chart.js
  // var chartDom = document.getElementById('chart1');
  // var myChart = echarts.init(chartDom);
  // var option = { ... }; // Chart configuration
  // myChart.setOption(option);
</script>
{% endblock %}